<script setup>
// import BonusGoodsList from '@/components/BonusGoodsList.vue'
// import GoodsGridList from '@/components/GoodsGridList.vue'
</script>
<template>
  <div class="bg-gray-50">
    <div class="p-12 max-[750px]:p-3 buy-d2">
      <div class="text-center max-w-[1200px] mx-auto max-[1200px]:p-3">
        <div class="flex flex-col gap-4">
          <div class="text-4xl text-white font-bold max-[750px]:text-xl">
            Get Free Bonus Runes to Your D2R Order
          </div>
          <div class="text-[#ccc] max-[750px]:text-sm">
            FREE D2R Bonus Runes will be automatically added to Your Order
          </div>
        </div>
      </div>
    </div>
    <div class="bg-white">
      <div class="text-center max-w-[1200px] mx-auto max-[1200px]:p-3">
        <div class="pt-15 pb-15 grid grid-cols-2 gap-10 max-[750px]:grid-cols-1">
          <div class="flex flex-col gap-3" v-for="item in 2" :key="'d2r' + item">
            <div class="text-3xl">How does it work?</div>
            <div class="leading-loose">
              Select your Game Mode from the Selector on the top right of the page. While you’re
              adding Items to the cart, the magic happens in the background. You will not see it in
              the cart, but the system will automatically add free D2R Runes to your order.
            </div>
          </div>
        </div>
        <div class="max-w-[50%] mx-auto leading-loose">
          <div class="pb-6">
            Bonus Levels are cumulative – once your order value crosses a threshold, you
            automatically unlock all lower levels and will get these bonus items too.
          </div>
          <div class="pb-12">
            <div class="flex">
              <div class="flex-1 flex items-center whitespace-nowrap">
                FREE &nbsp;<span class="font-bold">1x Ohm Rune</span>&nbsp; when you spend
              </div>
              <a-divider style="min-width: auto" orientation="right" orientation-margin="0px"
                ><div class="text-4xl">$30</div></a-divider
              >
            </div>
            <div class="flex">
              <div class="flex-1 flex items-center whitespace-nowrap">
                FREE &nbsp;<span class="font-bold">1x Lo Rune</span>&nbsp; when you spend
              </div>
              <a-divider style="min-width: auto" orientation="right" orientation-margin="0px"
                ><div class="text-4xl">$40</div></a-divider
              >
            </div>
            <div class="flex">
              <div class="flex-1 flex items-center whitespace-nowrap">
                FREE &nbsp;<span class="font-bold">1x Ber Rune</span>&nbsp; when you spend
              </div>
              <a-divider style="min-width: auto" orientation="right" orientation-margin="0px"
                ><div class="text-4xl">$50</div></a-divider
              >
            </div>
          </div>
          <div class="pb-12">
            Bonus will be given for each order only – It will not be calculated for more than 1
            order. Bonus is for D2 Resurrected only. (Currently no bonus for D2 Legacy).
          </div>
        </div>
      </div>
    </div>
    <div>
      <!-- <BonusGoodsList /> -->
    </div>
    <!-- Why Shop With Us? -->
    <div class="bg-white">
      <div class="text-center max-w-[1200px] mx-auto max-[1200px]:p-3">
        <div class="flex flex-col gap-4 pt-10">
          <div class="text-4xl">Why Shop With Us?</div>
          <div class="h-0.5 bg-amber-500 w-30 mx-auto mt-2"></div>
          <div class="w-[80%] mx-auto mb-10 border border-gray-300 text-left">
            <a-collapse accordion style="background: #fcfcfc; border: none">
              <template #expandIcon="{ isActive }">
                <caret-right-outlined :rotate="isActive ? 90 : 0" />
              </template>
              <a-collapse-panel key="1" header="Why are some items so expensive?">
                <p class="leading-loose">
                  Our prices are determined by supply and demand of the market. Although some items
                  may be cheaper at other stores, in the end you get what you pay for. So if you
                  want your items to be of the highest quality with the best possible customer
                  service then look no further!
                </p>
              </a-collapse-panel>
              <a-collapse-panel key="2" header="Can the items disappear?">
                <p class="leading-loose">
                  All items are found by a real player account and are 100% legit. We guarantee and
                  promise you that they will never disappear. We know some stores send dupes, but we
                  are absolutely safe if you shop with us. We have sold countless items and runes
                  over the years and we have not had a single complaint.
                </p>
              </a-collapse-panel>
              <a-collapse-panel
                key="3"
                header="I do not own or do not use the Diablo 2 expansion, Lord of Destruction. Can I still buy and use the items you sell?"
              >
                <p class="leading-loose">
                  Simply put, no you cannot. All the items we sell in the store can only be used on
                  the Lord of Destruction expansion. However, we are looking at selling items for
                  Classic users in the near future! 🙂
                </p>
              </a-collapse-panel>
            </a-collapse>
          </div>
        </div>
        <div class="flex flex-col gap-4">
          <div class="text-4xl">Topselling 💯 Unique Items</div>
          <div class="text-gray-400">All the Gear you NEED for Leveling and After</div>
          <div class="h-0.5 bg-amber-500 w-30 mx-auto mt-2 mb-10"></div>
        </div>
      </div>
    </div>
    <!-- goods list -->
    <div>
      <div class="max-w-[1200px] mx-auto pt-15 pb-15">
        <!-- <GoodsGridList :show-sku="true" /> -->
      </div>
    </div>
    <!-- Save % Today Using New Customer Code In Checkout -->
    <div>
      <div
        class="flex items-center justify-center gap-5 bg-white p-10 m-10 ml-0 mr-0 max-[750px]:flex-col"
      >
        <div class="text-3xl">Save % Today Using New Customer Code In Checkout</div>
        <Button bg="#f9a044" class="h-15"><CreditCardOutlined /> YESTASTIC </Button>
      </div>
    </div>
    <!-- Buy D2R Items, at Yesgamers -->
    <div class="p-12 max-[750px]:p-3 buy-d2 mt-20">
      <div class="text-center max-w-[1200px] mx-auto max-[1200px]:p-3">
        <div class="flex flex-col gap-4">
          <div class="text-4xl text-white font-bold max-[750px]:text-xl">
            Buy D2R Items, at Yesgamers
          </div>
          <div class="text-[#ccc] max-[750px]:text-sm">
            FREE D2R Bonus Runes will be automatically added to Your Order
          </div>
        </div>
      </div>
    </div>
    <!-- text-list -->
    <div class="p-25 max-[750px]:p-3">
      <div class="text-center max-w-[1600px] mx-auto max-[1600px]:p-3 flex flex-col gap-10">
        <div v-for="item in 2" :key="item + 'text-list'">
          <div class="text-4xl mb-7 max-[750px]:text-2xl">
            Types of Diablo 2 Items: Normal, Exceptional, Elite and Socketed
          </div>
          <div class="columns-2 gap-10 text-gray-500 text-left">
            <div class="avoid" v-for="item in 2" :key="item + 'text-item'">
              <div class="text-2xl leading-loose max-[750px]:text-base">
                二级标题Normal Armor and Weapons
              </div>
              <div class="text-sm leading-loose max-[750px]:text-xs">
                内容 You can identify Socketed items because their names appear in grey letters
                (when highlighted). You can find them in Normal or Superior Quality. After you
                complete the first Quest of the Act 5, you will be able to socket any item that
                allows sockets. In addition, there is a Horadric Cube Formula that allows items to
                be socketed. In order to insert a gem in a Socketed item, you have to left-click the
                gem and then left-click the item to fuse them. This way, you can customize your
                weapons and armor with improved stats and magical properties. The only items that
                you can socket are Helmets, Shields, Armors, and Weapons (except throwing weapons).
                In later, more difficult stages of the game, items with more sockets appear. The
                maximum number of sockets is 6 for a Weapon and 4 for Armor. This also depends on
                the rarity of an item:
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.buy-d2 {
  background: url('@/assets/icons/subscribe-image.jpg') no-repeat center center;
  background-size: cover;
}
.ant-collapse-item {
  border-bottom: none !important;
  padding: 6px 0 !important;
}
</style>
